<template>
  <el-input
    v-model.trim="value"
    :placeholder="placeholder"
    :type="type"
    maxlength="128"
    :autocomplete="autocomplete"
    @blur="emit('blur')"
  >
    <template #suffix>
      <el-icon class="el-input__password" @click="onToggleType">
        <hide-icon v-if="type === 'password'" />
        <view-icon v-else />
      </el-icon>
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { Hide as HideIcon, View as ViewIcon } from '@element-plus/icons-vue'

interface IProps {
  modelValue: string
  placeholder?: string
  autocomplete?: string
  defaultType?: 'password' | 'text'
}
interface IEmits {
  (event: 'blur'): void
  (event: 'update:modelValue', value: string): void
}

const props = withDefaults(defineProps<IProps>(), {
  placeholder: '请输入密码',
  defaultType: 'password'
})

const type = ref<'password' | 'text'>(props.defaultType)

const emit = defineEmits<IEmits>()

const value = computed({
  get: () => props.modelValue,
  set(val) {
    emit('update:modelValue', val)
  }
})

function onToggleType() {
  type.value = type.value === 'password' ? 'text' : 'password'
}
</script>

<style lang="scss" scoped></style>
